<template>
    <div class="app-container system-post">
        <sib-table
            row-key="postId"
            ref="sibTableRef"
            :index-config="indexConfig"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :request-config="requestConfig"
        >
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row }">
                <!-- eslint-disable-next-line -->
                <el-button type="primary" v-hasPermi="['system:post:edit']" link v-if="String(row.parentId) !== '0'" @click="handleEdit(row)">修改</el-button>
                <el-button type="primary" v-hasPermi="['system:post:add']" link @click="handleCopy(row)">复制</el-button>
                <!-- eslint-disable-next-line -->
                <el-button type="danger" v-hasPermi="['system:post:remove']" link v-if="String(row.parentId) !== '0'" @click="handleDelete(row)">删除</el-button>
            </template>
            <!-- 自定义表单与列表之间的内容 -->
            <template #operation-container>
                <el-button type="primary" plain icon="Plus" v-hasPermi="['system:post:add']" @click="handleAdd">新增</el-button>
            </template>
        </sib-table>

        <el-dialog
            class="form-dialog"
            v-if="dialogConfig.visible"
            append-to-body
            draggable
            align-center
            v-model="dialogConfig.visible"
            :close-on-click-modal="false"
            :title="dialogConfig.title"
            :width="dialogConfig.width || '800px'"
        >
            <sib-form v-bind="dialogConfig" @reset="dialogConfig.visible = false" @submit="handleSubmit"></sib-form>
        </el-dialog>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from '@/utils/request';

export default {
    // eslint-disable-next-line
    name: 'Post',
    setup() {
        const sibTableRef = ref(null);
        // 查询模块表单配置
        const searchConfig = reactive({
            showExpand: false,
            rowFieldSize: 4,
            fields: [
                {
                    label: '岗位编码',
                    code: 'postCode',
                    type: 'text',
                    maxlength: 100,
                },
                {
                    label: '岗位名称',
                    code: 'postName',
                    type: 'text',
                    maxlength: 100,
                },
                {
                    label: '状态',
                    code: 'status',
                    type: 'select',
                    optionProps: { value: 'dictValue', label: 'dictLabel' },
                    requestConfig: {
                        url: '/system/dict/data/type/sys_normal_disable',
                        method: 'get',
                    },
                    options: [],
                },
            ],
        });
        // 表格首列配置
        const indexConfig = reactive({ type: 'hidden' });
        // 表格表头配置
        const tableColumn = ref([
            {
                label: '岗位编号',
                code: 'postId',
            },
            {
                label: '岗位编码',
                code: 'postCode',
            },
            {
                label: '岗位名称',
                code: 'postName',
            },
            {
                label: '岗位排序',
                code: 'postSort',
            },
            {
                label: '状态',
                code: 'status',
                type: 'tag',
                relateFieldCode: 'status',
                tagType: ({ status }) => (String(status) === '0' ? 'success' : 'warning'),
            },
            {
                label: '创建时间',
                code: 'createTime',
                type: 'timeStamp',
                format: 'YYYY-MM-DD hh:mm',
                minWidth: 160,
            },
            {
                label: '操作',
                code: 'operate',
                type: 'slot',
                minWidth: 150,
                fixed: 'right',
            },
        ]);
        // 列表查询接口配置
        const requestConfig = reactive({
            url: '/system/post/list',
            method: 'get',
            // 自定义传参
            customSearchParams: obj => {
                const params = {};
                Object.keys(obj).forEach(key => {
                    if ([0, false].includes(obj[key]) || obj[key]) params[key] = obj[key];
                });
                return params;
            },
        });

        const sibFormRef = ref(null);
        // 新增、编辑等弹窗配置
        const dialogConfig = reactive({
            ref: 'sibFormRef',
            title: '',
            width: '500px',
            rowFieldSize: 1,
            resetText: '取消',
            // add/edit/copy
            type: 'add',
            visible: false,
            fields: [
                {
                    label: '岗位名称',
                    code: 'postName',
                    type: 'text',
                    maxlength: 100,
                    required: true,
                },
                {
                    label: '岗位编码',
                    code: 'postCode',
                    type: 'text',
                    maxlength: 100,
                    required: true,
                },
                {
                    label: '岗位排序',
                    code: 'postSort',
                    type: 'number',
                    controlsPosition: 'right',
                    required: true,
                },
                {
                    label: '岗位状态',
                    code: 'status',
                    type: 'radio',
                    optionProps: { value: 'dictValue', label: 'dictLabel' },
                    requestConfig: {
                        url: '/system/dict/data/type/sys_normal_disable',
                        method: 'get',
                    },
                    options: [],
                    required: true,
                    value: '0',
                },
                {
                    label: '备注',
                    code: 'remark',
                    type: 'textarea',
                },
            ],
            form: {},
        });

        return {
            sibTableRef,
            indexConfig,
            searchConfig,
            tableColumn,
            requestConfig,
            dialogConfig,
            sibFormRef,
            handleAdd() {
                Object.assign(dialogConfig, {
                    title: '新增',
                    type: 'add',
                    visible: true,
                    form: {},
                });
            },
            handleCopy(row) {
                Object.assign(dialogConfig, {
                    title: `从【${row.postName}】复制`,
                    type: 'copy',
                    visible: true,
                    form: { ...row, postId: null },
                });
            },
            handleEdit(row) {
                // prettier-ignore
                axios.get(`/system/post/${row.postId}`).then((res) => {
                    Object.assign(dialogConfig, {
                        title: `编辑【${row.postName}】`,
                        type: 'edit',
                        visible: true,
                        form: { ...(res.data || row || {}) },
                    });
                });
            },
            handleDelete(row) {
                // prettier-ignore
                ElMessageBox.confirm(`是否删除【${row.postName}】`, '温馨提示').then(() => {
                    axios.delete(`/system/post/${row.postId}`).then(() => {
                        ElMessage({ type: 'success', message: '删除成功' });
                        sibTableRef.value.getTableData();
                    });
                }).catch(() => {});
            },
            handleSubmit(form, cb) {
                const method = dialogConfig.type === 'edit' ? 'put' : 'post';
                // prettier-ignore
                axios[method]('/system/post', form).then(() => {
                    dialogConfig.visible = false;
                    dialogConfig.form = {};
                    sibTableRef.value.getTableData();
                }).finally(cb);
            },
        };
    },
};
</script>

<style lang="scss">
.system-post {
    height: calc(100vh - 84px);

    .sib-table {
        height: 100%;

        .sib-form {
            /* stylelint-disable-next-line selector-class-pattern */
            .sib-form-item__operations .el-form-item__content {
                justify-content: flex-start !important;
            }
        }
    }
}
</style>
